var addUser = document.querySelector('#add-user');
var double = document.querySelector('#double');
var millionaire = document.querySelector('#show-millionaire');
var sort = document.querySelector('#sort');
var calculate = document.querySelector('#calculate');
var check = document.querySelector('#check');
var main = document.querySelector('#main');

var USERDATA = [
  {
    name: "瑞丽",
    money: 892001
  },
  {
    name: "克莉斯",
    money: 668932
  },
  {
    name: "翠花",
    money: 698756
  },
  {
    name: "小红",
    money: 492489
  },
  {
    name: "丽丽",
    money: 853957
  },
  {
    name: "尼古拉斯.翠翠",
    money: 968472
  },
  {
    name: "布鲁斯.欣欣",
    money: 718225
  },
  {
    name: "罗斯柴尔德.婷婷",
    money: 889147
  },
];

var renderData = [];

function formatMoney(money) {
  var result = [];

  // 因为 money 传入进来是个数字，
  if (money >= 1000) {
    money = String(money).split('').reverse();
    money.forEach(function (value, index) {
      if (index % 3 === 0) {
        result.unshift(value, ',');
      } else {
        result.unshift(value);
      }
    });

    result = result.join('').slice(0, -1) + '.00';
  } else {
    result = money.toFixed(2);
  }

  return result;
}

// 结构渲染函数
function render(list) {
  // 如果 list 存在，那 list 的值就是本身
  // 如果 list 不存在，那 list 的值就等于 renderData
  list = list || renderData;

  main.innerHTML = `<h2>
    <strong>Person</strong>
    <span>Wealth</span>
    </h2>`;

  list.forEach(function (value) {
    main.innerHTML += `<h2>
        <strong>${value.name}</strong>
        <span>$${formatMoney(value.money)}</span>
      </h2>`;
  });
}

// 添加账户
addUser.onclick = function () {
  // 当原数组不存在数据时，直接中断函数
  if (!USERDATA.length) return;

  // 将原数组的第一项进行切割并推入到渲染数组中
  renderData.push(USERDATA.shift());

  // 触发结构渲染，将新数组重新渲染到页面上
  render();
};

// 资金翻倍
double.onclick = function () {
  renderData.forEach(function (value) {
    value.money *= 2;
  });

  render();
};

// 查询百万富翁
millionaire.onclick = function () {
  // 对 renderData 里面金钱大于100万的数据进行过滤
  var newArr = renderData.filter(function (value) {
    return value.money >= 1000000;
  });

  render(newArr);
};

// 查看已存在的数据
check.onclick = function () {
  render();
};

// 计算总额
calculate.onclick = function () {
  // 判断页面上是否存在总额
  if (main.children.length > renderData.length + 1) return;

  var totalMoney = 0;

  renderData.forEach(function (value) {
    totalMoney += Number(value.money);
  });

  main.innerHTML += `<h2>
    <strong>总额</strong>
    <span>$${formatMoney(totalMoney)}</span>
    </h2>`;
};

// 财富榜
sort.onclick = function () {
  renderData.sort(function (a, b) {
    return b.money - a.money;
  });

  render();
};
